<template>
  <div class="supplier-quotes">
    <a-page-header
      title="供应商报价"
      sub-title="供应商报价管理和比较"
    />

    <a-card>
      <a-table
        :columns="columns"
        :data-source="quotes"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'price'">
            ¥{{ record.price }}
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="record.status === 'valid' ? 'green' : 'red'">
              {{ record.status === 'valid' ? '有效' : '已过期' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">查看</a-button>
              <a-button type="link" size="small">比较</a-button>
              <a-button type="link" size="small" type="primary">选择</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const columns = [
  { title: '商品名称', dataIndex: 'productName', key: 'productName' },
  { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
  { title: '报价', dataIndex: 'price', key: 'price' },
  { title: '最小起订量', dataIndex: 'minOrder', key: 'minOrder' },
  { title: '有效期', dataIndex: 'validUntil', key: 'validUntil' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

const quotes = ref([
  {
    id: 1,
    productName: '苹果 红富士',
    supplier: '新鲜果业有限公司',
    price: 8.5,
    minOrder: '100kg',
    validUntil: '2024-01-31',
    status: 'valid'
  },
  {
    id: 2,
    productName: '苹果 红富士',
    supplier: '优质水果批发',
    price: 8.2,
    minOrder: '200kg',
    validUntil: '2024-01-25',
    status: 'valid'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})
</script>

<style scoped>
.supplier-quotes {
  padding: 24px;
}
</style>